/**
 * Created by SQB on 2015/6/3.
 */
;$(function(){
    var slide =  $('.slide');
    var sWidth = slide.width();
    console.log(sWidth);
    var len = slide.find("ul li").length;
    console.log(len);
    var index = 0;
    var picTimer;

    $(".slide div.btn span").css("opacity",0.4).mouseenter(function(){
        index = $(this).index();
        console.log(index);
    });

    $(".slide .preNext").css("opacity",0.2).hover(function(){
        $(this).stop(true,false).animate({"opacity":"0.5"},300);
    },function(){
        $(this).stop(true,false).animate({"opacity":"0.2"},300);
    });

    $(".slide .pre").click(function(){
        index -= 1;
        if(index == -1){
            index = len -1;
        }
        showPics(index);
    });

    $(".slide .next").click(function(){
        index += 1;
        if(index == len){
            index = 0;
        }
        showPics(index);
    });

    $(".slide ul").css("width",sWidth*(len));

    $(".slide ul").hover(function(){
        clearInterval(picTimer);
    },function(){
       picTimer = setInterval(function(){
          showPics(index);
           index++;
           if(index==len){
               index=0;
           }
       },4000);
    }).trigger("mouseleave");

    function showPics(index){
        var nowLeft = -index*sWidth;
        $(".slide ul").stop(true,flase).animate({left:nowLeft},300);
        $(".slide .btn span").removeClass("on").eq(index).addClass("on");
        $(".slide .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
    }
});